<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="80px">
      <el-form-item label="业主姓名" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入业主姓名" clearable style="width: 240px" @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="手机号码" prop="mobile">
        <el-input v-model="queryParams.mobile" placeholder="请输入手机号码" clearable style="width: 240px" @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="身份证号" prop="idNo">
        <el-input v-model="queryParams.idNo" placeholder="请输入身份证号" clearable style="width: 240px" @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="身份" prop="identity">
        <el-select v-model="queryParams.identity" placeholder="请选择身份" clearable style="width: 240px">
          <el-option v-for="dict in identityOptions" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作栏 -->
    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="Download"
          @click="handleExport"
        >导出</el-button>
      </el-col>
    </el-row> -->

    <!-- 表格 -->
    <el-table
      v-loading="loading"
      :data="userList"
      style="width: 100%"
    >
      <el-table-column label="业主姓名" prop="name" min-width="120" />
      <el-table-column label="手机号码" prop="mobile" min-width="130" />
      <el-table-column label="身份证号" prop="idNo" min-width="180" />
      <el-table-column label="绑定房屋/住户身份" min-width="220">
  <template #default="scope">
    <el-popover
      placement="top-start"
      :width="300"
      trigger="hover"
      v-if="scope.row.pmsHouseDtos && scope.row.pmsHouseDtos.length > 0"
    >
        <template #default>
            <div v-for="(item, idx) in scope.row.pmsHouseDtos" :key="idx" style="margin-bottom: 8px;">
            <span>
              {{ item.areaName }}-  {{ item.buildName  }}-{{ item.unitName }}-{{ item.pmsHouse.roomCode }}
            </span>
            </div>
        </template>
        <template #reference>
            <span style="cursor: pointer; color: #409eff; display: flex; align-items: center;">
            <span>
                {{ scope.row.pmsHouseDtos[0]?.areaName }}-  {{ scope.row.pmsHouseDtos[0]?.buildName  }}-{{ scope.row.pmsHouseDtos[0]?.unitName }}-{{ scope.row.pmsHouseDtos[0]?.pmsHouse.roomCode }}
            </span>
            <el-icon style="margin-left: 4px; font-size: 12px;"><ArrowDown /></el-icon>
            </span>
        </template>
        </el-popover>
        <span v-else>-</span>
    </template>
    </el-table-column>
      <el-table-column label="身份" prop="identityDesc" min-width="100" />
      <el-table-column label="状态" prop="statusDesc" min-width="150" />
      <el-table-column label="身份证地址" prop="idAddress" min-width="200" />
      <!-- <el-table-column label="房屋信息" min-width="200">
        <template #default="scope">
          <div v-if="scope.row.pmsHouseDtos && scope.row.pmsHouseDtos.length > 0">
            <div v-for="house in scope.row.pmsHouseDtos" :key="house.pmsHouse.houseId">
              <div>{{ house.communityName }} - {{ house.areaInfo }}</div>
              <div>房间号: {{ house.pmsHouse.roomCode }}</div>
            </div>
          </div>
        </template>
      </el-table-column> -->
      <el-table-column label="创建时间" prop="createDate" min-width="180" />

    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

   
     
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted, getCurrentInstance } from 'vue'
import { listUser } from '@/api/house/user'
import { ArrowDown } from '@element-plus/icons-vue'

const { proxy } = getCurrentInstance()

const identityOptions = [
  { value: 1, label: '业主' },
  { value: 2, label: '租户' },
  { value: 3, label: '家属' }
]

const loading = ref(false)
const userList = ref([])
const total = ref(0)

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: '',
    mobile: '',
    idNo: '',
    identity: ''
  }
})
const { queryParams } = toRefs(data)

onMounted(() => {
  getList()
})

// const rules = {
//   name: [{ required: true, message: '请输入业主姓名', trigger: 'blur' }],
//   mobile: [
//     { required: true, message: '请输入手机号码', trigger: 'blur' },
//     { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
//   ],
//   idCard: [
//     { required: true, message: '请输入身份证号', trigger: 'blur' },
//     { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号', trigger: 'blur' }
//   ],
//   email: [
//     { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
//   ]
// }

function getList() {
  loading.value = true
  listUser(queryParams.value).then(res => {
    // 处理数据，将bindUserMap中的字段提取到外层
    const processedData = (res?.rows || []).map(item => {
      const bindUser = Object.values(item.bindUserMap || {})[0] || {}
      return {
        ...item,
        id: bindUser.id,
        userId: bindUser.userId,
        houseRoomId: bindUser.houseRoomId,
        identity: bindUser.identity,
        isPropertyRight: bindUser.isPropertyRight,
        isDefault: bindUser.isDefault,
        operatorId: bindUser.operatorId,
        communityId: bindUser.communityId,
        idNo: bindUser.idNo,
        idAddress: bindUser.idAddress,
        createDate: bindUser.createDate,
        lastModifyDate: bindUser.lastModifyDate,
        mobiles: bindUser.mobiles,
        houseRoomIds: bindUser.houseRoomIds
      }
    })
    userList.value = processedData
    total.value = res?.total || 0
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}

function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

function resetQuery() {
  queryParams.value.name = ''
  queryParams.value.mobile = ''
  queryParams.value.idNo = ''
  queryParams.value.identity = ''
  handleQuery()
}



function handleExport() {
  proxy.download(
    'pms/binduser/export',
    { ...queryParams.value },
    `user_${new Date().getTime()}.xlsx`
  )
}


</script>


